import {
  Component,
  Input,
  OnInit,
  ElementRef,
  ViewChild,
  AfterViewInit,
} from '@angular/core';

declare namespace Prism {
  function highlightElement(e: any): void;
}

@Component({
  selector: 'code-block',
  templateUrl: './code-block.component.html',
  styleUrls: ['./code-block.component.scss'],
})
export class CodeBlockComponent implements OnInit, AfterViewInit {
  constructor() {}

  code: string = '';
  language: string = '';
  code_language: string = '';

  @Input() edit:boolean = false;
  @Input() value!: string;
  @Input() settings?: string;

  @ViewChild('tref', { read: ElementRef }) tref!: ElementRef;

  ngOnInit(): void {
    this.code = this.value;
    if (this.settings) {
      let settingsObj = JSON.parse(this.settings);
      this.code_language = settingsObj.language;
      this.language = `language-${settingsObj.language}`;
    }
  }
  ngAfterViewInit(): void {
    Prism.highlightElement(this.tref.nativeElement);
  }
}
